<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运输端</title>
<link rel="stylesheet" href="css/all.css">
<script src="jquery.js"></script>
    <script>
    $(function(){
        $(".main-left-ul>li").click(function(){
            var $sub = $(this).children(".sub");
            if($sub.is(":visible"))
            	$sub.slideUp(100);
            else
            	$sub.slideDown(100);
            //让被点击的一级菜单箭头旋转
            $(this).toggleClass("current");   //切换类
        });
        $('.sub>li').click(function(e){
        	var $otherSub1 = $(this).parent(".sub").parent(".main-left-ul>li").siblings().find("a");
        	var $otherSub2 = $(this).siblings().children("a");
        	$otherSub1.css("color","white");
        	$otherSub2.css("color","white");
        	$(this).children("a").css("color","rgb(51,166,184)");
            e.stopPropagation(); // 停止冒泡
        });
    });
    
    </script>
<style type="text/css">
	*{
        margin: 0;
        padding: 0%;
      }
      .head {
        width: 100%;
        height: 30px;
        background-color: black;
        font-weight:bold;
        font-size:30px;
		color:white;
		font-family:"宋体";
		padding: 15px 0px 10px 0px;
        
      }
      .header2{
		height:50px;
		width:80%;
		background:white;
		color:RGB(201,201,201);
		padding:0px;
		line-height:0px;
	  }
	  .user-info{
	  	position: fixed;
  		top: 0;
  		right: 0;
	  }
	  .user-info a {
        display: inline-block;
        text-align: center;
        width:70px;
  		padding: 10px 0;
  		color: white;
  		text-decoration: none;
  		font-size: 30px;
		}	

	  .user-info a:hover {
  		background-color: #333;
	  }
      .main {
        width: 100%;
        height: 845px;
      }
      .main-left {
        float: left;
        width: 15%;
        height: 100%;
        background-color: #212121;
      }
      .main-left-ul > li {
      	cursor: pointer;
        width: 100%;
        /* 不设置height，不然菜单将固定，没有展开效果 */
        list-style: none;
        line-height: 50px;
        font-size: 20px;
        text-align:center;
        color:white;
        position: relative;
        border-bottom: 0.5px solid white;
      }
      .parent::before {
  		font-family: "Font Awesome 5 Free";
  		font-weight: 900;
  		margin-right: 10px;
	 }
	 .parent:nth-child(1)::before {
  		content: "\f1b9";
	 }
	 .parent:nth-child(2)::before {
  		content: "\f85a";
	 }
	 .parent:nth-child(3)::before {
  		content: "\f3fd";
	 }
	 .parent:nth-child(4)::before {
  		content: "\f5e1";
	 }
	 .parent:nth-child(5)::before {
  		content: "\f52f";
	 }
	 .parent:nth-child(6)::before {
  		content: "\f62a";
	 }
	 .parent:nth-child(7)::before {
  		content: "\f10a";
	 }
      .main-left-ul > li > span {
      	display:inline-block;
        margin-left: 50px;
        font-size:30px;
      }
      .current>span{
            transform: rotate(90deg);
        }
      .main-right {
        float: left;
        width: 84%;
        height: 100%;
      }
      a {
      	display: block;
        text-decoration: none;
        color:white;
      }
      .sub {
        display: none;
      }
      .sub > li {
        list-style: none;
        background: rgb(133,133,133);
        border-bottom: 0.5px solid white;
      }
</style>
</head>
<body>
<div class="head">
	公司用车管理系统
	<div class="user-info">
	<a href="#"><i class="fa fa-home"></i></a> 
    <a href="#"><i class="fas fa-user"></i></a>
    <a href="#"><i class="fas fa-sign-out-alt"></i></a>
  </div>
</div>
    <div class="main">
      <div class="main-left">
        <ul class="main-left-ul">
          <li tabindex="1" class="parent">
          	车辆管理<span>&gt;</span>
            <ul class="sub">
            	<li><a href="D-Car_Admin.jsp" target="iframe0">车辆列表</a></li>
          		<li><a href="D-car_manage.jsp" target="iframe0">派车单处理</a></li>
            </ul>
          </li>
          <li tabindex="2" class="parent">
          	车辆保养<span>&gt;</span>
          	<ul class="sub">
          		<li><a href="D-Details_maintenance.jsp" target="iframe0">保养详情</a></li>
            	<li><a href="D-add_maintenance.jsp" target="iframe0">添加保养信息</a></li>
            </ul>
          </li>
          <li tabindex="3" class="parent">
          	车辆维修<span>&gt;</span>
            <ul class="sub">
            <li><a href="D-Details_repair.jsp" target="iframe0">维修详情</a></li>
            	<li><a href="D-add_repair.jsp" target="iframe0">添加维修信息</a></li>
            </ul>
          </li>
          <li tabindex="4" class="parent">
            车辆违章<span>&gt;</span>
            <ul class="sub">
            	<li><a href="D-Details_Violation.jsp" target="iframe0">违章详情</a></li>
            	<li><a href="D-add_Violation.jsp" target="iframe0">添加违章信息</a></li>
            </ul>
          </li>
          <li tabindex="5" class="parent">
            车辆加油<span>&gt;</span>
            <ul class="sub">
            	<li><a href="D-Details_oil.jsp" target="iframe0">添加加油信息</a></li>
            	<li><a href="D-add_oil.jsp" target="iframe0">添加加油信息</a></li>
            </ul>
          </li>
          <li tabindex="6" class="parent">
            车辆年检<span>&gt;</span>
            <ul class="sub">
            	<li><a href="D-Details_inspect.jsp" target="iframe0">年检详情</a></li>
            	<li><a href="D-add_inspect.jsp" target="iframe0">添加年检信息</a></li>
            </ul>
          </li>
          <li tabindex="7" class="parent">
            查询统计<span>&gt;</span>
            <ul class="sub">
            	<li><a href="D-car_schedule.jsp" target="iframe0">车辆安排一览表</a></li>
            	<li><a href="D-car_usage.jsp" target="iframe0" >车辆使用统计</a></li>
            	<li><a href="D-car_Departure.jsp" target="iframe0" >驾驶员出车统计</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="main-right">
       	 <iframe
         	 src="D-car_manage.jsp"
         	 name="iframe0"
         	 width="100%"
        	  height="100%"
       	 ></iframe>
      	</div>
    </div>
  </body>
</html>